import 'package:flutter/material.dart';
import 'package:flutter_smart_heating/ui/ui.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class HomeWeatherView extends StatelessWidget {
  const HomeWeatherView({super.key, this.weather});
  final Map<String, dynamic>? weather;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        UiOpen(
          url: '/information/weather',
          child: Row(children: [
            Container(
              margin: const EdgeInsets.only(right: 4),
              height: 16,
              width: 16,
              child: UiImage(
                imageUrl: weather?['icon'] ?? '',
                zoomable: false,
              ),
            ),
            Expanded(
              child: Text(
                weather?['intro'] ?? '',
                style: TextStyle(
                  color: UiTheme(context).match(
                    light: const Color.fromARGB(255, 0, 97, 255),
                  ),
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
            const Text('更多'),
            const Icon(Icons.arrow_forward_ios, size: 14)
          ]),
        ),
        const SizedBox(height: 10),
        UiPanel(
          height: 210,
          width: double.infinity,
          backgroundColor: UiTheme(context).match(
            light: const Color.fromARGB(255, 241, 248, 254),
          ),
          border: UiTheme(context).match(
            light: Border.all(
              width: 0.2,
              color: const Color.fromARGB(255, 174, 190, 225),
            ),
          ),
          padding: const EdgeInsets.only(top: 15, right: 15),
          child: weather?['charts'] == null
              ? null
              : SfCartesianChart(
                  plotAreaBorderWidth: 0.1,
                  plotAreaBorderColor: Colors.grey.withOpacity(0.4),
                  primaryXAxis: CategoryAxis(
                    axisLine: AxisLine(
                        width: 0.1, color: Colors.grey.withOpacity(0.5)),
                    labelPlacement: LabelPlacement.onTicks,
                    majorGridLines: const MajorGridLines(width: 0.1),
                  ),
                  primaryYAxis: NumericAxis(
                    labelFormat: '{value}°',
                    axisLine: AxisLine(
                        width: 0.1, color: Colors.grey.withOpacity(0.5)),
                    majorGridLines: const MajorGridLines(width: 0.1),
                  ),
                  tooltipBehavior: TooltipBehavior(
                    enable: true,
                    borderColor: Colors.black26,
                    color: Colors.black54,
                    textStyle: const TextStyle(color: Colors.white),
                    format: "point.x point.y",
                  ),
                  series: [
                    SplineAreaSeries<dynamic, String>(
                      dataSource: weather?['charts'] ?? [],
                      xValueMapper: (sales, _) => sales['date'],
                      yValueMapper: (sales, _) => sales['temp'],
                      name: '当日温度',
                      opacity: 0.3,
                      color: Colors.blue,
                    ),
                    SplineSeries<dynamic, String>(
                      dataSource: weather?['charts'] ?? [],
                      xValueMapper: (sales, _) => sales['date'],
                      yValueMapper: (sales, _) => sales['temp'],
                      dataLabelMapper: (sales, _) => '${sales['temp']}°',
                      color: Colors.blue,
                      markerSettings: const MarkerSettings(
                        isVisible: true,
                      ),
                      name: '当日温度',
                      dataLabelSettings: const DataLabelSettings(
                        isVisible: true,
                      ),
                    )
                  ],
                ),
        ),
      ],
    );
  }
}
